<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../../plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../css/singer.css">
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <link rel="stylesheet" href="/dev/views/cxy/css/playerto.css">
    <style>
        .list2{
            width: 719px;
            height: 319px;
        }
        .imgc1{
            position: relative;
            top: 20px;
            padding: 0 0 30px 0px;
            margin: 20px 0 0 -17px;
            border-bottom: 2px solid #c20c0c;
        }
        .imgc1 li {
            /* position: relative; */
            display: inline-block;
            padding-left: 17px;

        }
        .first a{
            color: #333 !important;
        }
        #QPlayer{
            z-index:200;
        }
    </style>
</head>

<body>
<div id="app"></div>
<!--播放器-->
<div id="QPlayer">
    <div id="pContent">

        <div id="player">
            <span class="cover"></span>
            <div class="ctrl">
                <div class="musicTag marquee">
                    <strong>Title</strong>
                    <span> - </span>
                    <span class="artist">Artist</span>
                </div>
                <div class="progress">
                    <div class="timer left">0:00</div>
                    <div class="contr">
                        <div class="rewind icon"></div>
                        <div class="playback icon"></div>
                        <div class="fastforward icon"></div>
                    </div>
                    <div class="right">
                        <div class="liebiao icon"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ssBtn" style="background:#000 none repeat scroll 0% 0%">
            <div class="adf"></div>
        </div>
    </div>
    <ol id="playlist"></ol>
</div>
<div class="first">
    <div class="rowl tj">
        <div class=" tj">
            <div class="innertj1">
                <ul class="list-group">
                    <div class="htj1">
                        <h6 style="font-size: 20px">推荐</h6>
                    </div>
                    <li class="list-group-item firstli "><a href="#" onclick="tjselect()">推荐歌手</a></li>
                    <li class="list-group-item firstli"><a href="#" onclick="rmselect()">热门歌手</a></li>
                </ul>
            </div>
            <div class="innertj">
                <ul class="list-group">
                    <div class="htj">
                        <h6 style="font-size: 20px">推荐</h6>
                    </div>
                    <li class="list-group-item firstli"><a href="#" onclick="hymanselect()" class="singertype1">华语男歌手</a></li>
                    <li class="list-group-item firstli"><a href="#" onclick="hywanselect()" class="singertype2">华语女歌手</a></li>
                    <li class="list-group-item firstli">
                        <a href="#">入驻歌手</a>
                    </li>
                </ul>
            </div>
            <div class="innertj">
                <ul class="list-group">
                    <div class="htj">
                        <h6 style="font-size: 20px">推荐</h6>
                    </div>
                    <li class="list-group-item firstli"><a href="#">入驻歌手</a></li>
                    <li class="list-group-item firstli"><a href="#">入驻歌手</a></li>
                    <li class="list-group-item firstli"><a href="#">入驻歌手</a></li>
                </ul>
            </div>
            <div class="innertj">
                <ul class="list-group">
                    <div class="htj">
                        <h6 style="font-size: 20px">推荐</h6>
                    </div>
                    <li class="list-group-item firstli"><a href="#">入驻歌手</a></li>
                    <li class="list-group-item firstli"><a href="#">入驻歌手</a></li>
                    <li class="list-group-item firstli"><a href="#">入驻歌手</a></li>
                </ul>
            </div>
            <div class="innertj">
                <ul class="list-group">
                    <div class="htj">
                        <h6 style="font-size: 20px">推荐</h6>
                    </div>
                    <li class="list-group-item firstli"><a href="#">入驻歌手</a></li>
                    <li class="list-group-item firstli"><a href="#">入驻歌手</a></li>
                    <li class="list-group-item firstli"><a href="#">入驻歌手</a></li>
                </ul>
            </div>
            <div class="innertj">
                <ul class="list-group">
                    <div class="htj">
                        <h6 style="font-size: 20px">推荐</h6>
                    </div>
                    <li class="list-group-item firstli"><a href="#">入驻歌手</a></li>
                    <li class="list-group-item firstli"><a href="#">入驻歌手</a></li>
                    <li class="list-group-item firstli"><a href="#">入驻歌手</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="gs">
        <div class="gsw">
            <div class="gsw tit">
                <h3 style="float: left;margin-top: 10px">入驻歌手</h3>
                <a href="" style="float: right; padding-top: 15px;">更多></a>
            </div>
            <div class="gsw list1">

<!--                    <li style="display: inline-block;">-->
<!--                        <div class="gsw card1">-->
<!--                            <a href=""><img-->
<!--                                    src="http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=130y130"></a>-->
<!--                        </div>-->
<!--                        <p><a href="">张会没</a></p>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                    <li style="display: inline-block;">-->
<!--                        <div class="card1">-->
<!--                            <img src="http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=130y130"><a-->
<!--                                href=""></a>-->
<!--                        </div>-->
<!--                        <p><a href="">张会没</a></p>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                    <li style="display: inline-block;">-->
<!--                        <div class="card1">-->
<!--                            <img src="http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=130y130"><a-->
<!--                                href=""></a>-->
<!--                        </div>-->
<!--                        <p><a href="">张会没</a></p>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                    <li style="display: inline-block;">-->
<!--                        <div class="card1">-->
<!--                            <img src="http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=130y130"><a-->
<!--                                href=""></a>-->
<!--                        </div>-->
<!--                        <p><a href="">张会没</a></p>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                    <li style="display: inline-block;">-->
<!--                        <div class="card1">-->
<!--                            <img src="http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=130y130"><a-->
<!--                                href=""></a>-->
<!--                        </div>-->
<!--                        <p><a href="">张会没</a></p>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                    <li style="display: inline-block;">-->
<!--                        <div class="card1">-->
<!--                            <img src="http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=130y130"><a-->
<!--                                href=""></a>-->
<!--                        </div>-->
<!--                        <p><a href="">张会没</a></p>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                    <li style="display: inline-block;">-->
<!--                        <div class="card1">-->
<!--                            <img src="http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=130y130"><a-->
<!--                                href=""></a>-->
<!--                        </div>-->
<!--                        <p><a href="">张会没</a></p>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                    <li style="display: inline-block;">-->
<!--                        <div class="card1">-->
<!--                            <a href="#"><img-->
<!--                                    src="http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=130y130"></a>-->
<!--                        </div>-->
<!--                        <p><a href="">张会没</a></p>-->
<!--                    </li>-->

            </div>

            <div class="gsw tit1">
                <h3 style="float: left;margin-top: 10px">热门歌手</h3>
                <a href="#" style="float: right; padding-top: 15px;">更多></a>
            </div>

            <div class="gsw list2">
<!--                <ul class="gsw imgc1">-->
<!--                    <li style="display: inline-block;">-->
<!--                        <div class="gsw card1">-->
<!--                            <img src="http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=130y130"><a-->
<!--                                href=""></a>-->
<!--                        </div>-->
<!--                        <p>张会没</p>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                    <li style="display: inline-block;">-->
<!--                        <div class="card1">-->
<!--                            <img src="http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=130y130"><a-->
<!--                                href=""></a>-->
<!--                        </div>-->
<!--                        <p>张会没</p>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                    <li style="display: inline-block;">-->
<!--                        <div class="card1">-->
<!--                            <img src="http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=130y130"><a-->
<!--                                href=""></a>-->
<!--                        </div>-->
<!--                        <p>张会没</p>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                    <li style="display: inline-block;">-->
<!--                        <div class="card1">-->
<!--                            <img src="http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=130y130"><a-->
<!--                                href=""></a>-->
<!--                        </div>-->
<!--                        <p>张会没</p>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                    <li style="display: inline-block;">-->
<!--                        <div class="card1">-->
<!--                            <img src="http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=130y130"><a-->
<!--                                href=""></a>-->
<!--                        </div>-->
<!--                        <p>张会没</p>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                    <li style="display: inline-block;">-->
<!--                        <div class="card1">-->
<!--                            <img src="http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=130y130"><a-->
<!--                                href=""></a>-->
<!--                        </div>-->
<!--                        <p>张会没</p>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                    <li style="display: inline-block;">-->
<!--                        <div class="card1">-->
<!--                            <img src="http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=130y130"><a-->
<!--                                href=""></a>-->
<!--                        </div>-->
<!--                        <p>张会没</p>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                    <li style="display: inline-block;">-->
<!--                        <div class="card1">-->
<!--                            <img src="http://p1.music.126.net/cSAmmAvsKhm3N-zxWg7QcQ==/109951168490195225.jpg?param=130y130"><a-->
<!--                                href=""></a>-->
<!--                        </div>-->
<!--                        <p>张会没</p>-->
<!--                    </li>-->
<!--                </ul>-->
            </div>


        </div>
    </div>
</div>
</div>
<script src="../../../plugins/jquery.min.js"></script>
<script src="http://localhost:8088/dev/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<script src="/dev/plugins/layui/layui.js"></script>
<script src="../js/singer.js"></script>
<script src="/dev/views/cxy/js/xiaobofang/jquery.marquee.min.js"></script>
<script>

    // 	var	playlist = [
    // // {title:name,artist:"gname",mp3:"/dev/views/cxy/music/"+name+".mp3",cover:"/dev/views/cxy/music/img/" + img,},
    // {title:"Uptown Funk",artist:"Mark Ronson",mp3:"jq22-1.mp3",cover:"t2.png",},
    // ];
    var time=localStorage.getItem('time');
    // if (time!=null)
    // {

    // }
    // if (time!=0)
    // {
    // 	var isRotate = true;
    // 	var autoplay = true;
    // 	console.log("000")
    // }

    var timet=Math.round(time)
    console.log(timet)
    if (timet!=0)
    {
        var isRotate = true;
        var autoplay = false;

    }else {
        var isRotate = true;
        var autoplay = false;
    }


</script>
<script src="/dev/views/cxy/js/xiaobofang/player.js"></script>
<script>

    function bgChange(){
        var lis= $('.lib');
        for(var i=0; i<lis.length; i+=2)
            lis[i].style.background = 'rgba(246, 246, 246, 0.7)';
    }
    window.onload = bgChange;
</script>

<script>
    $(function(){
        $("#app").load('/dev/views/slx/nav.html');
    })
</script>
<script>
    // $(function(){
    //     // console.log(result)
    //     $.ajax({
    //         type:'Get',
    //         url:'http://localhost:8088/dev/singer/select',
    //         async: true,//请求是否异步，默认为异步，这也是ajax重要特性
    //         data: "",    //参数值
    //         contentType:"application/json",
    //         success:function(result){
    //             if(result.code==200){
    //                 let arr=result.data
    //                 console.log(arr);
    //                 loadData1(arr)
    //                 loadData2(arr)
    //             }
    //         }
    //     })
    // })
    // function tjselect() {
    //     $.ajax({
    //         type: 'Get',
    //         url: 'http://localhost:8088/dev/singer/select',
    //         async: true,//请求是否异步，默认为异步，这也是ajax重要特性
    //         data: "",    //参数值
    //         contentType: "application/json",
    //         success: function (result) {
    //             if (result.code == 200) {
    //                 let arr = result.data
    //                 loadData1(arr)
    //             }
    //
    //         }
    //     })
    // }
    // function rmselect(){
    //     $.ajax({
    //         type: 'Get',
    //         url: 'http://localhost:8088/dev/singer/select',
    //         async: true,//请求是否异步，默认为异步，这也是ajax重要特性
    //         data: "",    //参数值
    //         contentType: "application/json",
    //         success: function (result) {
    //             if (result.code == 200) {
    //                 let arr=result.data
    //                 loadData1(arr)
    //             }
    //         }
    //     })
    // }
    // function hymanselect(){
    //     let lia=$(".singertype1").text()
    //     console.log(lia)
    //     // $.ajax({
    //     //     type:'Get',
    //     //     url:'http://localhost:8088/dev/singer/hynanselect',
    //     //     async:true,
    //     //     data: {"xinxi":"lia"},
    //     //     contentType:"application/json",
    //     //     success:function (result){
    //     //         if (result.code == 200) {
    //     //             let arr=result.data
    //     //
    //     //             loadData1(arr)
    //     //         }
    //     //     }
    //     // })
    //     $.get(`http://localhost:8088/dev/singer/hynanselect/${lia}`,function(result){
    //         if (result.code == 200) {
    //             let arr=result.data
    //
    //             loadData1(arr)
    //         }
    //     })
    // }
    // function hywanselect(){
    //     let lia=$(".singertype2").text()
    //     console.log(lia)
    //     $.get(`http://localhost:8088/dev/singer/hynvselect/${lia}`,function(result){
    //         if (result.code == 200) {
    //             let arr=result.data
    //
    //             loadData1(arr)
    //         }
    //     })
    // }
    //
    // function loadData1(arr){
    //
    //     let str=' <ul class="gsw imgc" id="a">';
    //
    //     for(let i=0;i<arr.length;i++){
    //         str+=`<li style="display: inline-block;">
    //             <div class="gsw card1">
    //               <a href="http://localhost:8088/dev/views/czn/views/Introduction.html?id=${arr[i].id}"><img src="../avatar/${arr[i].singerAvatar}"></a>
    //             </div>
    //             <p><a href="http://localhost:8088/dev/views/czn/views/Introduction.html?id=${arr[i].id}">${arr[i].singerName}</a></p>
    //           </li>`
    //     }
    //     str+=`</ul>`;
    //     $(".list1").html(str);
    // }
    // function loadData2(arr){
    //
    //     let str=' <ul class="gsw imgc1" id="a1">';
    //
    //     for(let i=0;i<arr.length;i++){
    //         str+=`<li style="display: inline-block;">
    //             <div class="gsw card1">
    //               <a href="http://localhost:8088/dev/views/czn/views/Introduction.html?id=${arr[i].id}"><img src="../avatar/${arr[i].singerAvatar}"></a>
    //             </div>
    //             <p><a href="http://localhost:8088/dev/views/czn/views/Introduction.html?id=${arr[i].id}">${arr[i].singerName}</a></p>
    //           </li>`
    //     }
    //     str+=`</ul>`;
    //     $(".list2").html(str);
    // }

</script>
<script>

</script>
<script>
    $(function (){
        $(".playerxiao").load('/dev/views/cxy/views/cemian.html');
    })
</script>
</body>
</html>